<template>
  <div class="todo_box">
    <form class="form" v-on:submit="addTodo">
      <input @keyup.enter="addTask" class="input form__input" v-model="inputVal" />
      <span class="btn form__submit-btn" @click="addTask">新增</span>
    </form>
    <transition-group tag="ol" name="list" class="todo-list">
      <li
        class="todo-list__item"
        v-bind:class="{ complete: todo.complete }"
        v-bind:key="index"
        v-for="(todo, index) in showList"
      >
        <button class="todo-list__item-content" v-on:click="toggleTodo(todo)">
          {{ todo.text }}
        </button>
        <button
          class="btn todo-list__item-remove"
          v-on:click="deleteTodo(todo)"
        >
          <i
            class="fa"
            v-bind:class="[todo.complete ? 'fa-check' : 'fa-times']"
          ></i>
        </button>
      </li>
    </transition-group>
    <div class="filters">
      <span
        class="btn filters__btn filters__btn--all"
        :class="{ active: activeType == '0' }"
        v-on:click="filterTodos('all')"
      >
        所有
      </span>
      <span
        class="btn filters__btn filters__btn--complete"
        v-on:click="filterTodos('complete')"
        :class="{ active: activeType == '1' }"
      >
        完成
      </span>
      <span
        class="btn filters__btn filters__btn--incomplete"
        v-on:click="filterTodos('incomplete')"
        :class="{ active: activeType == '2' }"
      >
        未完成
      </span>
    </div>
  </div>
</template>
<script setup lange="ts">
import { ref, onMounted, watch, toRaw } from 'vue';
import {
  indexDBAddData,
  openIndexDB,
  updateDB,
  getDataByKey,
  deleteDB,
  getAllFromIndexedDB,
} from '../../tool/indexDB';
const filteredTodos = ref([]);
const showList = ref([]);
const activeType = ref('0');
const db = ref({});
onMounted(() => {
  if (showList.value.length == 0) {
    showList.value = filteredTodos.value;
  }

  openIndexDB('todoDB', 'todoStore', '1').then((res) => {
    db.value = res;
    getAllFromIndexedDB(db.value, 'todoStore').then((res) => {
      filteredTodos.value = res;
    });
  });
});

const inputVal = ref('');

const addTask = () => {
  if(inputVal.value == "") return
  const obj = { text: inputVal.value, complete: false };
  filteredTodos.value.push(obj);
  indexDBAddData(db.value, 'todoStore', {
    id: new Date().getTime(),
    text: inputVal.value,
    incomplete: false,
    complete: false,
  })
};

const toggleTodo = (todo) => {
  filteredTodos.value.map((item) => {
    if (item.text == todo.text) {
      item.complete = true;
      item.incomplete = false;
      updateDB(db.value, 'todoStore', toRaw(item))
    }
  });
};

const deleteTodo = (todo) => {
  filteredTodos.value.map((item) => {
    if (item.text == todo.text) {
      item.complete = false;
      item.incomplete = true;
      updateDB(db.value, 'todoStore', toRaw(item))
    }
  });
};

const filterTodos = (type) => {
  if (type == 'all') {
    activeType.value = 0;
    showList.value = filteredTodos.value.filter((item) => {
      return item;
    });
  } else if (type == 'complete') {
    activeType.value = 1;
    showList.value = filteredTodos.value.filter((item) => {
      return item.complete == true;
    });
  } else {
    activeType.value = 2;
    showList.value = filteredTodos.value.filter((item) => {
      return item.complete == false;
    });
  }
};
watch(filteredTodos, (n) => {
  showList.value = filteredTodos.value;
});
</script>

<style lang="less" scoped>
.todo_box {
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.263);
  background: #38003c;
  width: 900px;
  height: 520px;
  margin: 40px auto;
  padding: 20px;
  border-radius: 20px;
}

button {
  background: none;
  border: none;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
  &:focus {
    outline: none;
  }
  &:hover {
    cursor: pointer;
  }
}

.btn {
  font-size: 14px;
  margin: 0 0.5em;
  border-radius: 2em;
  padding: 0.75em 1.5em;
  cursor: pointer;
  background: none;
  color: darken(#4fc08d, 20%);
  border: 1px solid;
  letter-spacing: 1px;
  font-family: 'Source Sans Pro', sans-serif;
  color: #4fc08d;
  border: #4fc08d 1px solid;
  transition: 250ms ease-out;
  &:hover,
  &:focus {
    color: #fff;
    background: #4fc08d;
  }
}

.form {
  padding: 1rem 1rem 0 1rem;
  display: flex;
  &__input {
    width: 70%;
    font-size: 14px;
    margin: 0 0.5em;
    border-radius: 2em;
    padding: 0.75em 1.5em;
    background: none;
    font-family: 'Source Sans Pro', sans-serif;
    border: #e3e3e3 1px solid;
    transition: border 250ms ease-out;
    color: white;
    &:focus {
      border: #4fc08d 1px solid;
      outline: none;
    }
  }
}

.todo-list {
  width: 100%;
  padding: 0 1rem;
  flex: 1;
  height: 380px;
  overflow-y: scroll;
  overflow-x: hidden;
  &::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  &__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5em;
    margin-bottom: 0.5em;
    border-radius: 3px;
    transition: 200ms;
    color: #4fc08d;
    &:last-child {
      margin-bottom: 0;
    }
    &.complete {
      color: lightgreen;
      //   &__item-content {
      //     &:after {
      //       background: lightgreen;
      //     }
      //   }
    }
  }
  &__item-content {
    position: relative;
    &:after {
      content: '';
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      height: 1px;
      background: #4fc08d;
      transition: 250ms ease-out;
      transform-origin: center;
      transform: scalex(0);
    }
    &:hover,
    &:focus {
      &:after {
        transform: scalex(1);
      }
    }
  }
  &__item-remove {
    margin-left: 0.5em;
    background: none;
    border: 1px solid;
    color: inherit;
    padding: 0;
    line-height: 1;
    width: 2em;
    height: 2em;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 80%;
  }
}

.filters {
  width: 100%;
  display: flex;
  justify-content: space-around;
  padding: 0 1rem 1.5rem 1rem;
}

.list-move,
.list-leave-active,
.list-enter-active {
  transition: 500ms cubic-bezier(0.87, -0.41, 0.19, 1.44);
}
.list-enter,
.list-leave-active {
  transform: translate(10%, 0);
  opacity: 0;
}
.active {
  background-color: #4fc08d;
  color: white;
}
</style>
